<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../vue.js"></script>
</head>

<body>
    <div id="app">
        <div id="demo">
            <h2>人员列表</h2>
            <input type="text" v-model="keyWord">

            <button @click = "sort(0)">正常排序</button>
            <button @click = "sort(1)">升序</button>
            <button @click = "sort">降序</button>


            <ul>
                <li v-for="item in person2" :key="item.id">
                    {{item.name}} -- {{item.age}} -- {{item.gender}}
                </li>
            </ul>
        </div>
    </div>
    <script>
        Vue.config.productionTip = false;

        const vm = new Vue({
            el: "#app",
            data() {
                return {
                    keyWord: '',
                    persons: [
                        { id: '001', name: '马冬梅', age: 25, gender: '女' },
                        { id: '002', name: '周冬雨', age: 20, gender: '女' },
                        { id: '003', name: '周杰伦', age: 21, gender: '男' },
                        { id: '004', name: '帅邓伦', age: 22, gender: '男' },
                    ],
                    type: 0
                }
            },
            //计算属性
            computed: {
                person2() {
                    //过滤
                    const newArr = this.persons.filter(item => {
                        return item.name.indexOf(this.keyWord) !== -1
                    })

                    if(this.type === 0) {
                        return newArr
                    }

                    //排序 a-b 升序
                    newArr.sort((a, b) => {
                        return this.type === 1 ? a.age - b.age : b.age - a.age
                    })

                    //把过滤排序后的数组给计算属性
                    return newArr

                }
            },
            //函数
            methods:{
                sort(count){
                    this.type = count
                }
            }
        })
    </script>
</body>

</html>